<template>
  <div class="NavHeader">
    <div class="icon">
      <!-- 收缩侧边菜单栏的图标 -->
      <el-icon size="24px" v-model="isFold" @click="FoldFn" v-show="isFold"><Expand /></el-icon>
      <!-- <el-icon size="20px" v-model="isFold" @click="FoldFn" v-show="isFold"
        ><ArrowRightBold
      /></el-icon> -->
      <el-icon  size="24px" v-model="isFold" @click="FoldFn" v-show="!isFold"><Fold /></el-icon>
      <!-- <el-icon size="20px" v-model="isFold" @click="FoldFn" v-show="!isFold"
        ><ArrowLeftBold
      /></el-icon> -->
    </div>
    <!-- 面包屑区域 -->
    <div class="content">
      <div class="bread">
        <el-breadcrumb separator="/" class="el-breadcrumb">
          <el-breadcrumb-item v-for="bread in bread" :key="bread.name" >{{
            bread.name
          }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ username }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>退出登录</el-dropdown-item>
              <el-dropdown-item divided>用户信息</el-dropdown-item>
              <el-dropdown-item>系统管理</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, ref } from "vue";
import { useStore } from "@/store/index";
import { useRoute } from "vue-router";
import { pathMapBread } from "@/utils/map-menus";
export default defineComponent({
  name: "NavHeader",
  emits: ["FoldMenu"],
  setup(props, { emit }) {
    const isFold = ref(false);
    const store = useStore();
    //折叠NavMenu
    const FoldFn = () => {
      emit("FoldMenu", isFold.value);
      isFold.value = !isFold.value;
    };
    //登陆人的信息
    const username = store.state.login.userinfo.name
    //面包屑
    
    const route = useRoute();

    const bread = computed(() => {
      const currentPath = route.path;
      return pathMapBread(store.state.login.menuinfo, currentPath);
    });

    return {
      isFold,
      FoldFn,
      bread,
      username
    };
  },
});
</script>

<style lang="less" scoped>
.NavHeader {
  display: flex;
  height: 60px;
  width: 100%;
  margin: 10px 0;
  align-items: center;
  // background-color: #f3f1f7;

  .content {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    padding-left: 7px;
    padding-bottom: 2px;
    .bread {
      ::v-deep(.el-breadcrumb__inner){
        font-size: 18px;
        color: #fff;
      }
      ::v-deep(.el-breadcrumb__separator){
        color: #fff;
      }
    }

    .example-showcase .el-dropdown-link {
      cursor: pointer;
      display: flex;
      align-items: center;
    }
    .el-dropdown-link {
      color: #fff;
      font-size: 20px;
      font-weight: 500;
    }
  }
}
</style>